<template>
  <div class="movie-detail-container">
    <!-- 电影信息区域 -->
    <div class="movie-info-section">
      <el-card class="movie-info-card" :body-style="{ padding: '0' }">
        <div class="movie-backdrop" :style="{ backgroundImage: `url(${FilmDetail?.photo})` }"></div>
        <div class="movie-content">
          <div class="movie-poster">
            <img :src="FilmDetail?.photo" alt="电影海报" class="poster-image">
            <div class="movie-rating">
              <el-rate v-model="rating" />
            </div>
          </div>
          <div class="movie-details">
            <h1 class="movie-title">{{ FilmDetail?.name }}</h1>
            <div class="movie-meta">
              <div class="meta-item">
                <i class="el-icon-video-camera"></i>
                <span>{{ FilmDetail?.movieLength }}分钟</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-price-tag"></i>
                <span>{{ FilmDetail?.type }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-money"></i>
                <span>￥{{ FilmDetail?.price }}元起</span>
              </div>
            </div>
            <div class="movie-info-grid">
              <div class="info-row">
                <span class="info-label">导演:</span>
                <span class="info-value">{{ FilmDetail?.director }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">主演:</span>
                <span class="info-value">{{ FilmDetail?.actors }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">简介:</span>
                <div class="info-value movie-description">{{ FilmDetail?.intro }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 选座和购票区域 -->
    <div class="booking-section">
      <el-row :gutter="20">
        <!-- 座位选择区域 -->
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
          <el-card class="seat-selection-card">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-film"></i> 选择座位</span>
                <el-tag type="info" effect="plain" class="seat-legend">
                  <span class="legend-item"><span class="seat-available"></span> 可选</span>
                  <span class="legend-item"><span class="seat-selected"></span> 已选</span>
                  <span class="legend-item"><span class="seat-occupied"></span> 已售</span>
                </el-tag>
              </div>
            </template>
            <div class="seat-map-container">
              <div class="screen-container">
                <div class="screen">银幕</div>
              </div>
              <div class="seats-container">
                <div class="seat-row" v-for="row in 6" :key="'row-'+row">
                  <div class="row-label">{{ String.fromCharCode(64 + row) }}</div>
                  <div 
                    v-for="col in 6" 
                    :key="'seat-'+(row-1)*6+col" 
                    class="seat" 
                    :class="getSeatClass((row-1)*6+col)"
                    @click="toggleSeat((row-1)*6+col)"
                  >
                    <el-tooltip :content="getSeat((row-1)*6+col)" placement="top">
                      <div class="seat-inner">{{ col }}</div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 场次选择和订单信息 -->
        <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
          <el-card class="showtime-card">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-time"></i> 选择场次</span>
              </div>
            </template>
            <div class="showtime-list">
              <div 
                v-for="(it, index) in FilmShow" 
                :key="it.id"
                class="showtime-item"
                :class="{ 'showtime-active': lastSelected === index }"
                @click="selectShow(it, index, $event)"
              >
                <div class="showtime-info">
                  <div class="showtime-time">{{ formatTime(it?.time) }}</div>
                  <div class="showtime-name">{{ it?.name }}</div>
                </div>
                <div class="showtime-price">￥{{ FilmDetail?.price }}元起</div>
              </div>
            </div>
          </el-card>

          <el-card class="order-summary-card">
            <template #header>
              <div class="card-header">
                <span><i class="el-icon-shopping-cart-full"></i> 订单信息</span>
              </div>
            </template>
            <div class="order-summary">
              <div class="summary-row">
                <span class="summary-label">电影:</span>
                <span class="summary-value">{{ FilmDetail?.name }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">场次:</span>
                <span class="summary-value">{{ showName || '请选择场次' }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">座位:</span>
                <span class="summary-value">{{ seatId ? getSeat(seatId) : '请选择座位' }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">票数:</span>
                <div class="ticket-counter">
                  <el-button 
                    size="small" 
                    icon="el-icon-minus" 
                    circle 
                    @click="select > 1 ? select-- : null"
                    :disabled="select <= 1"
                  ></el-button>
                  <span class="ticket-count">{{ select }}</span>
                  <el-button 
                    size="small" 
                    icon="el-icon-plus" 
                    circle 
                    @click="select++"
                  ></el-button>
                </div>
              </div>
              <div class="summary-row total-price">
                <span class="summary-label">总价:</span>
                <span class="summary-value price">￥{{ FilmDetail?.price * select }}元</span>
              </div>
              <el-button 
                type="danger" 
                class="checkout-btn" 
                @click="goOrder"
                :disabled="!seatId || !showName"
              >
                立即购票
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 确认订单对话框 -->
    <el-dialog 
      title="确认订单信息" 
      v-model="dialogVisible" 
      width="500px"
      custom-class="order-dialog"
    >
      <div class="dialog-content">
        <div class="dialog-movie-info">
          <img :src="FilmDetail?.photo" alt="电影海报" class="dialog-poster">
          <div class="dialog-movie-details">
            <h2 class="dialog-movie-title">{{ FilmDetail?.name }}</h2>
            <div class="dialog-movie-meta">
              <span><i class="el-icon-video-camera"></i> {{ FilmDetail?.movieLength }}分钟</span>
              <span><i class="el-icon-price-tag"></i> {{ FilmDetail?.type }}</span>
            </div>
          </div>
        </div>

        <div class="dialog-order-details">
          <div class="dialog-detail-row">
            <span class="dialog-detail-label">场次:</span>
            <span class="dialog-detail-value">{{ showName }}</span>
          </div>
          <div class="dialog-detail-row">
            <span class="dialog-detail-label">座位:</span>
            <span class="dialog-detail-value">{{ getSeat(seatId) }}</span>
          </div>
          <div class="dialog-detail-row">
            <span class="dialog-detail-label">票数:</span>
            <span class="dialog-detail-value">{{ select }}张</span>
          </div>
          <div class="dialog-detail-row dialog-total">
            <span class="dialog-detail-label">总价:</span>
            <span class="dialog-detail-value dialog-price">￥{{ FilmDetail?.price * select }}元</span>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" @click="goOrder11">确认支付</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 评论区域 -->
    <div class="review-section">
      <el-card class="review-card">
        <template #header>
          <div class="card-header">
            <span><i class="el-icon-chat-line-round"></i> 电影评论</span>
          </div>
        </template>
        
        <!-- 添加评论 -->
        <div class="add-review-container">
          <div class="review-rating">
            <span class="rating-label">我的评分:</span>
            <el-rate v-model="userRating" allow-half />
          </div>
          <el-input
            v-model="reviewContent"
            type="textarea"
            :rows="3"
            placeholder="分享您对这部电影的看法..."
            class="review-textarea"
          />
          <div class="review-submit">
            <el-button type="primary" @click="submitReview" :disabled="!reviewContent.trim() || userRating === 0">发表评论</el-button>
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="review-list" v-if="reviews.length > 0">
          <div class="review-item" v-for="review in reviews" :key="review.id">
            <div class="review-header">
              <div class="reviewer-info">
                <span class="reviewer-name">{{ review.userName }}</span>
                <el-rate v-model="review.rating" disabled text-color="#ff9900" />
              </div>
              <div class="review-time">{{ formatReviewTime(review.createTime) }}</div>
            </div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-footer">
              <div class="review-like" @click="handlelikeReview(review)">
                <i class="el-icon-thumb" :class="{ 'liked': review.isLiked }"></i>
                <span>{{ review.likes || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无评论提示 -->
        <div class="no-reviews" v-else>
          <i class="el-icon-chat-dot-square"></i>
          <p>暂无评论，快来发表第一条评论吧！</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onBeforeMount, ref } from "vue";

import { reqFilmDetail, reqFilmOrder, reqFilmShow, ReturnSeatByMovieId, getAllReviews, addReview, likeReview } from "@/api/moive";
import { formatTime, getSeat } from "@/util/common.ts";
import { ElMessage } from "element-plus";

const router = useRouter();
let $router = useRouter();
let film = ref<any>("");
let FilmShow = ref<any>();
let showNameId = ref<any>();
let showName = ref<any>();
let FilmDetail = ref<any>();
let select = ref(1);
let seatId = ref(null);
let dialogVisible = ref(false);

// 图片路径
const defaultImg = new URL("@/assets/chair.svg", import.meta.url).href;
const occupiedImg = new URL("@/assets/chair-occupied.svg", import.meta.url).href;
// 存储已购买座位的索引
const occupiedSeats = ref([]);
// 存储用户点击选中的座位
const selectedSeats = ref([]);

let lastSelected = ref(null); // 记录上次选中的元素

// 评论相关数据
const reviews = ref([]);
const userRating = ref(0);
const reviewContent = ref('');

onBeforeMount(async () => {
  film.value = router.currentRoute.value.query.id;
  await getFilmDetail();
  await getFilmShow();
  await getSeats();
  await getReviews();
});

// 获取座位的CSS类
const getSeatClass = (index) => {
  if (occupiedSeats.value.includes(index)) {
    return 'seat-occupied';
  }
  return selectedSeats.value.includes(index) ? 'seat-selected' : '';
};

const selectShow = (it, index) => {
  showNameId.value = it.id;
  showName.value = it.name;
  lastSelected.value = index;
};
const rating=ref(0);
const getFilmDetail = async () => {
  let result: any = await reqFilmDetail(film.value);
  FilmDetail.value = result.data;
   rating.value = result.data.rating;
  console.log(rating);
  
};

const getFilmShow = async () => {
  let result: any = await reqFilmShow(film.value);
  FilmShow.value = result.data;
};

const getSeats = async () => {
  let result: any = await ReturnSeatByMovieId(film.value);
  occupiedSeats.value = result.data.map(item => parseInt(item.message));
};

const toggleSeat = (index: number) => {
  if (occupiedSeats.value.includes(index)) {
    ElMessage.error("该座位已被购买");
    return;
  }

  // 清除之前选择的座位
  selectedSeats.value = [];
  
  // 设置新选择的座位
  selectedSeats.value.push(index);
  seatId.value = index;
};

const goOrder = async () => {
  if (!seatId.value) {
    ElMessage.warning("请选择座位");
    return;
  }
  
  if (!showName.value) {
    ElMessage.warning("请选择场次");
    return;
  }
  
  dialogVisible.value = true;
};

const goOrder11 = async () => {
  // 先判断有没有登录
  if (!localStorage.getItem("id")) {
    ElMessage.error("请先登录");
    await $router.push("/login");
    return;
  }

  let userId = localStorage.getItem("id");
  let data = {
    amount: FilmDetail.value?.price * select.value,
    message: seatId.value,
    movieId: film.value,
    showNameId: showNameId.value,
    sum: select.value,
    userId: userId
  };
  
  try {
    let result = await reqFilmOrder(data);
    ElMessage.success(result.data);
    dialogVisible.value = false;
    
    // 刷新座位数据
    await getSeats();
    
    // 清除选择
    selectedSeats.value = [];
    seatId.value = null;
  } catch (error) {
    ElMessage.error("购票失败，请重试");
  }
};

// 格式化评论时间
const formatReviewTime = (time) => {
  if (!time) return '';
  return `${time[0]}-${time[1]}-${time[2]} ${time[3]}:${time[4]}`;
};

// 获取电影评论
const getReviews = async () => {
  try {
    const result = await getAllReviews(film.value);
    if (result.code === 200) {
      reviews.value = result.data.map(review => ({
        ...review,
        isLiked: false // 添加点赞状态标记
      }));
    }
  } catch (error) {
    console.error('获取评论失败', error);
  }
};

// 提交评论
const submitReview = async () => {
  // 检查是否登录
  if (!localStorage.getItem("id")) {
    ElMessage.error("请先登录后再评论");
    await $router.push("/login");
    return;
  }
  
  if (!reviewContent.value.trim()) {
    ElMessage.warning("评论内容不能为空");
    return;
  }
  
  if (userRating.value === 0) {
    ElMessage.warning("请为电影评分");
    return;
  }
  
  const userId = localStorage.getItem("id");
  const data = {
    movieId: film.value,
    userId: userId,
    content: reviewContent.value,
    rating: userRating.value,
    movieName: FilmDetail.value?.name
  };
  
  try {
    const result = await addReview(data);
    if (result.code === 1) {
      ElMessage.success("评论发表成功");
      reviewContent.value = '';
      userRating.value = 0;
      await getReviews(); // 刷新评论列表
    } else {
      ElMessage.error(result.msg || "评论发表失败");
    }
  } catch (error) {
    ElMessage.error("评论发表失败，请重试");
  }
};

// 点赞评论
const handlelikeReview = async (review) => {
  // 检查是否登录
  if (!localStorage.getItem("id")) {
    ElMessage.error("请先登录后再点赞");
    await $router.push("/login");
    return;
  }
  
  // 防止重复点赞
  if (review.isLiked) {
    ElMessage.warning("您已经点过赞了");
    return;
  }
  
  try {
    const result = await likeReview(review.id);
    if (result.code === 1) {
      review.likes++;
      review.isLiked = true;
      ElMessage.success("点赞成功");
    } else {
      ElMessage.error(result.msg || "点赞失败");
    }
  } catch (error) {
    ElMessage.error("点赞失败，请重试");
  }
};
</script>

<style scoped lang="scss">
.movie-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

/* 评论区域样式 */
.review-section {
  margin-bottom: 40px;
}

/* 电影信息区域样式 */
.movie-info-section {
  margin-bottom: 30px;
}

.movie-info-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.movie-backdrop {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 450px;
  width: 1200px;
  margin: -200px auto 0;
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  opacity: 0.5;
  border-radius: 20px;
  z-index: 0;
}

.movie-content {
  position: relative;
  display: flex;
  padding: 20px;
  z-index: 1;
}

.movie-poster {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 300px;
  margin-right: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 20px;
}

.movie-details {
  flex-grow: 1;
}

.movie-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #222;
}

.movie-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #666;
}

.meta-item i {
  margin-right: 5px;
  color: #ff5252;
}

.movie-info-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-row {
  display: flex;
}

.info-label {
  flex-shrink: 0;
  width: 60px;
  font-weight: bold;
  color: #1ba4e5;
}

.info-value {
  flex-grow: 1;
}

.movie-description {
  line-height: 1.6;
  margin-top: 5px;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 7;   /* 限制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 座位选择区域样式 */
.booking-section {
  margin-bottom: 40px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
}

.card-header i {
  margin-right: 5px;
  color: #ff5252;
}

.seat-legend {
  display: flex;
  gap: 15px;
  font-weight: normal;
}

.legend-item {
  display: flex;
  align-items: center;
}

.seat-available, .seat-selected, .seat-occupied {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  margin-right: 5px;
}

.seat-available {
  background-color: #e0e0e0;
  border: 1px solid #ccc;
}

.seat-selected {
  background-color: #1ba4e5;
  border: 1px solid #0c8bca;
}

.seat-occupied {
  background-color: #ff9a9a;
  border: 1px solid #ff7070;
}

.seat-map-container {
  padding: 20px 0;
}

.screen-container {
  text-align: center;
  margin-bottom: 30px;
}

.screen {
  width: 80%;
  height: 30px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #e0e0e0, #f5f5f5);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #666;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.seats-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.seat-row {
  display: flex;
  gap: 15px;
  align-items: center;
}

.row-label {
  width: 20px;
  text-align: center;
  font-weight: bold;
  color: #666;
}

.seat {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.seat-inner {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.2s;
  border: 1px solid #ccc;
}

.seat:hover .seat-inner {
  transform: scale(1.1);
}

.seat.seat-selected .seat-inner {
  background-color: #1ba4e5;
  color: white;
  border-color: #0c8bca;
}

.seat.seat-occupied .seat-inner {
  background-color: #ff9a9a;
  color: white;
  border-color: #ff7070;
  cursor: not-allowed;
}

/* 场次选择区域样式 */
.showtime-card, .order-summary-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.showtime-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 0;
}

.showtime-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.showtime-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.showtime-active {
  background-color: #e1f5fe;
  border-left: 4px solid #1ba4e5;
  border-color: #1ba4e5;
  color: #1ba4e5;
}

.showtime-active .showtime-time {
  color: #1ba4e5;
  font-weight: bold;
}

.showtime-active .showtime-name {
  color: #1ba4e5;
}

.showtime-active .showtime-price {
  color: #1ba4e5;
  font-weight: bold;
}

.showtime-time {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.showtime-name {
  font-size: 0.9rem;
  color: #666;
}

.showtime-price {
  font-weight: bold;
  color: #ff5252;
}

/* 订单信息区域样式 */
.order-summary {
  padding: 10px 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.summary-label {
  font-weight: bold;
  color: #666;
}

.summary-value {
  color: #333;
}

.ticket-counter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-count {
  font-size: 1.1rem;
  font-weight: bold;
  min-width: 30px;
  text-align: center;
}

.total-price {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff5252;
}

.checkout-btn {
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  margin-top: 15px;
  border-radius: 30px;
  transition: all 0.3s;
}

.checkout-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 82, 82, 0.3);
}

/* 确认订单对话框样式 */
.order-dialog {
  border-radius: 10px;
}

.dialog-content {
  padding: 10px;
}

.dialog-movie-info {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-poster {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 15px;
}

.dialog-movie-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.dialog-movie-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #666;
}

.dialog-order-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dialog-detail-row {
  display: flex;
  justify-content: space-between;
}

.dialog-detail-label {
  font-weight: bold;
  color: #666;
}

.dialog-total {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.dialog-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ff5252;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .movie-content {
    flex-direction: column;
  }
  
  .movie-poster {
    margin: 0 auto 20px;
  }
  
  .movie-title {
    text-align: center;
  }
  
  .movie-meta {
    justify-content: center;
  }
  
  .body {
    flex-direction: column;
  }
  
  .seat-map-container {
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .movie-detail-container {
    padding: 10px;
  }
  
  .movie-poster {
    width: 150px;
    height: 225px;
  }
  
  .movie-title {
    font-size: 1.8rem;
  }
  
  .seats-container {
    padding: 0 10px;
  }
  
  .seat {
    width: 35px;
    height: 35px;
  }
  
  .seat-inner {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  .movie-content {
    padding: 15px;
  }
  
  .movie-poster {
    width: 120px;
    height: 180px;
  }
  
  .movie-title {
    font-size: 1.5rem;
  }
  
  .seat {
    width: 30px;
    height: 30px;
    gap: 8px;
  }
  
  .seat-inner {
    width: 25px;
    height: 25px;
    font-size: 0.7rem;
  }
  
  .row-label {
    width: 15px;
    font-size: 0.8rem;
  }
  
  .dialog-poster {
    width: 80px;
    height: 120px;
  }
  
  .dialog-movie-title {
    font-size: 1.2rem;
  }
  
  .review-item {
    padding: 12px;
  }
  
  .reviewer-name {
    font-size: 0.9rem;
  }
  
  .review-content {
    font-size: 0.9rem;
  }
}

/* 评论区样式 */
.review-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 30px;
}

.add-review-container {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.review-rating {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.rating-label {
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

.review-textarea {
  margin-bottom: 15px;
}

.review-submit {
  text-align: right;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s;
}

.review-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviewer-name {
  font-weight: bold;
  color: #1ba4e5;
}

.review-time {
  font-size: 0.8rem;
  color: #999;
}

.review-content {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #333;
}

.review-footer {
  display: flex;
  justify-content: flex-end;
}

.review-like {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
  padding: 5px 10px;
  border-radius: 20px;
}

.review-like:hover {
  background-color: #f0f0f0;
}

.review-like i {
  font-size: 1.1rem;
}

.review-like i.liked {
  color: #ff5252;
}

.no-reviews {
  text-align: center;
  padding: 30px 0;
  color: #999;
}

.no-reviews i {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #ddd;
}
</style>